<template>
  <div>
    <ux-grid ref="singleTable" v-if="reLoadFlg" :data="prposTabelData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'left',
      fontWeight: 'bold',
      padding: 0,
      height: '32px',
    }" :cell-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '14px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
      element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty"> {{ empty }} </template>

      <ux-table-column property="ssnDate" :title="tabelDataConfig.ssnDate.title" :resizable="false"
        v-if="tabelDataConfig.ssnDate.isShow" :width="tabelDataConfig.ssnDate.width"
        :fixed="JSON.parse(tabelDataConfig.ssnDate.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''" style="text-align: center">
            {{ scope.row.ssnDate }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="opeDate" :title="tabelDataConfig.opeDate.title" :resizable="false"
        v-if="tabelDataConfig.opeDate.isShow" :width="tabelDataConfig.opeDate.width"
        :fixed="JSON.parse(tabelDataConfig.opeDate.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''" style="text-align: center">
            {{ scope.row.opeDate }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="inspectName " :title="tabelDataConfig.inspectName.title" :resizable="false"
        v-if="tabelDataConfig.inspectName.isShow" :width="tabelDataConfig.inspectName.width"
        :fixed="JSON.parse(tabelDataConfig.inspectName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.inspectName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="posNo" :title="tabelDataConfig.posNo.title" :resizable="false"
        v-if="tabelDataConfig.posNo.isShow" :width="tabelDataConfig.posNo.width"
        :fixed="JSON.parse(tabelDataConfig.posNo.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.posNo }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="posName" :title="tabelDataConfig.posName.title" :resizable="false"
        v-if="tabelDataConfig.posName.isShow" :width="tabelDataConfig.posName.width"
        :fixed="JSON.parse(tabelDataConfig.posName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.posName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="ispSpcCode" :title="tabelDataConfig.ispSpcCode.title" :resizable="false"
        v-if="tabelDataConfig.ispSpcCode.isShow" :width="tabelDataConfig.ispSpcCode.width"
        :fixed="JSON.parse(tabelDataConfig.ispSpcCode.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.ispSpcCode }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="ispWayName" :title="tabelDataConfig.ispWayName.title" :resizable="false"
        v-if="tabelDataConfig.ispWayName.isShow" :width="tabelDataConfig.ispWayName.width"
        :fixed="JSON.parse(tabelDataConfig.ispWayName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.ispWayName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="impReason" :title="tabelDataConfig.impReason.title" :resizable="false"
        v-if="tabelDataConfig.impReason.isShow" :width="tabelDataConfig.impReason.width"
        :fixed="JSON.parse(tabelDataConfig.impReason.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.impReason }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="timCodName" :title="tabelDataConfig.timCodName.title" :resizable="false"
        v-if="tabelDataConfig.timCodName.isShow" :width="tabelDataConfig.timCodName.width"
        :fixed="JSON.parse(tabelDataConfig.timCodName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.timCodName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="opnCodName" :title="tabelDataConfig.opnCodName.title" :resizable="false"
        v-if="tabelDataConfig.opnCodName.isShow" :width="tabelDataConfig.opnCodName.width"
        :fixed="JSON.parse(tabelDataConfig.opnCodName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.opnCodName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="thkCodName" :title="tabelDataConfig.thkCodName.title" :resizable="false"
        v-if="tabelDataConfig.thkCodName.isShow" :width="tabelDataConfig.thkCodName.width"
        :fixed="JSON.parse(tabelDataConfig.thkCodName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.thkCodName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="icdCstCodName" :title="tabelDataConfig.icdCstCodName.title" :resizable="false"
        v-if="tabelDataConfig.icdCstCodName.isShow" :width="tabelDataConfig.icdCstCodName.width"
        :fixed="JSON.parse(tabelDataConfig.icdCstCodName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.icdCstCodName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="ispRstCodName" :title="tabelDataConfig.ispRstCodName.title" :resizable="false"
        v-if="tabelDataConfig.ispRstCodName.isShow" :width="tabelDataConfig.ispRstCodName.width"
        :fixed="JSON.parse(tabelDataConfig.ispRstCodName.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :style="{ color: scope.row.ispRstAbrv }">
            {{ scope.row.ispRstCodName }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="summary" :title="tabelDataConfig.summary.title" :resizable="false"
        v-if="tabelDataConfig.summary.isShow" :width="tabelDataConfig.summary.width"
        :fixed="JSON.parse(tabelDataConfig.summary.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.summary }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="cntPln" :title="tabelDataConfig.cntPln.title" :resizable="false"
        v-if="tabelDataConfig.cntPln.isShow" :width="tabelDataConfig.cntPln.width"
        :fixed="JSON.parse(tabelDataConfig.cntPln.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.cntPln }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="orgThck" :title="tabelDataConfig.orgThck.title" :resizable="false"
        v-if="tabelDataConfig.orgThck.isShow" :width="tabelDataConfig.orgThck.width"
        :fixed="JSON.parse(tabelDataConfig.orgThck.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.orgThck }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="lmtThck" :title="tabelDataConfig.lmtThck.title" :resizable="false"
        v-if="tabelDataConfig.lmtThck.isShow" :width="tabelDataConfig.lmtThck.width"
        :fixed="JSON.parse(tabelDataConfig.lmtThck.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''">
            {{ scope.row.lmtThck }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="mgtThck" :title="tabelDataConfig.mgtThck.title" :resizable="false"
        v-if="tabelDataConfig.mgtThck.isShow" :width="tabelDataConfig.mgtThck.width"
        :fixed="JSON.parse(tabelDataConfig.mgtThck.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.mgtThck }}
          </p>
        </template>
      </ux-table-column>



      <ux-table-column property="crrDept" :title="tabelDataConfig.crrDept.title" :resizable="false"
        v-if="tabelDataConfig.crrDept.isShow" :width="tabelDataConfig.crrDept.width"
        :fixed="JSON.parse(tabelDataConfig.crrDept.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.crrDept }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="heaThck" :title="tabelDataConfig.heaThck.title" :resizable="false"
        v-if="tabelDataConfig.heaThck.isShow" :width="tabelDataConfig.heaThck.width"
        :fixed="JSON.parse(tabelDataConfig.heaThck.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.heaThck }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="remThck" :title="tabelDataConfig.remThck.title" :resizable="false"
        v-if="tabelDataConfig.remThck.isShow" :width="tabelDataConfig.remThck.width"
        :fixed="JSON.parse(tabelDataConfig.remThck.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.remThck }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="chgDate" :title="tabelDataConfig.chgDate.title" :resizable="false"
        v-if="tabelDataConfig.chgDate.isShow" :width="tabelDataConfig.chgDate.width"
        :fixed="JSON.parse(tabelDataConfig.chgDate.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''" style="text-align: center">
            {{ scope.row.chgDate }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="lstThk" :title="tabelDataConfig.lstThk.title" :resizable="false"
        v-if="tabelDataConfig.lstThk.isShow" :width="tabelDataConfig.lstThk.width"
        :fixed="JSON.parse(tabelDataConfig.lstThk.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.lstThk }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="lstLif2" :title="tabelDataConfig.lstLif2.title" :resizable="false"
        v-if="tabelDataConfig.lstLif2.isShow" :width="tabelDataConfig.lstLif2.width"
        :fixed="JSON.parse(tabelDataConfig.lstLif2.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor right-text' : 'right-text'
            ">
            {{ scope.row.lstLif2 }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column property="oddLif" :title="tabelDataConfig.oddLif.title" :resizable="false"
        v-if="tabelDataConfig.oddLif.isShow" :width="tabelDataConfig.oddLif.width"
        :fixed="JSON.parse(tabelDataConfig.oddLif.isFlex) ? 'left' : ''">
        <template slot-scope="scope">
          <p :class="scope.row.actuKbn == 1 ? 'sizeColor' : ''" style="text-align: center">
            {{ scope.row.oddLif }}
          </p>
        </template>
      </ux-table-column>

    </ux-grid>
  </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import { showLoading, hideLoading } from "@/utils/loading";
// 导出模块
export default {
  // 模块名字
  name: "MSDetailTabel",
  props: {
    tableHeight: Number,
    prposTabelData: Array,
    loading: Boolean,
    tabelDataConfig: Object,
    empty: String,
    rightViewFlag: Boolean
  },
  // 模块数据
  data() {
    //数据
    return {
      DateList: [],
      activeNum: 0,
      nextIndex: -1,

      reLoadFlg: true,

    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    prposTabelData: {
      immediate: true,
      handler(nData) {
        showLoading();
        this.reLoadFlg = false;
        console.log(nData, "NNNNNNNNNNNn")

        this.DateList = [];
        if (nData.length != 0) {
          this.activeNum = 0;
          this.$emit("getMSTabelRow", this.prposTabelData[0]);
        } else {
          //列表为空-
          setTimeout(() => {
            eventBus.$emit("resetSaveForMSD")
            this.$emit("getMSTabelRow", 'listEmpty');
            console.log("111111111111111111")
          }, 300);
        }
        setTimeout(() => {
          hideLoading();
          this.reLoadFlg = true;

          try {
            this.$refs.singleTable.refreshColumn();
            this.$refs.singleTable.doLayout();
          } catch (error) {
            //
          }
        }, 500)
      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    reSetTableFn() {
      setTimeout(() => {
        this.$refs.singleTable.refreshColumn();
      }, 1000);
    },
    setCurrentByR(r) {
      for (var i = 0; i < this.prposTabelData.length; i++) {
        if (this.prposTabelData[i].posNo == r) {
          this.$refs.singleTable.pagingScrollTopLeft(i * 32);
          this.$refs.singleTable.setCurrentRow(this.prposTabelData[i]);
          return;
        }
      }
    },
    handleCurrentChange(val) {
      //初始监听状态
      if (this.rightViewFlag) {
        eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
      }


      let Fn = () => {
        console.log(val)
        //阻止点击后切换
        this.$store.state.threeFlg = val.actuNo;

        this.currentRow = val;
        this.$refs.singleTable.setCurrentRow(this.currentRow);
        this.$emit("getMSTabelRow", val);
        this.prposTabelData.forEach((i, v) => {
          if (i == val) {
            this.activeNum = v;
          }
        });
        console.log(this.activeNum)
        eventBus.$emit("MSDType", 2)
      }
      /**
       * 2。  记录当前函数。
       */
      if (this.$store.state.isCurrentNext) {
        Fn();
      } else {
        /**
          * 4-1。   记录原来该运行的函数。
          * 4-2。   执行保存弹出框操作。   
          */
        this.$refs.singleTable.setCurrentRow(this.currentRow);
        this.$store.commit("changeIsCurrentFn", Fn);

        eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
      }

    },
    clickROW(row) {
      console.log(row);
    },
    load() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    // 设置选择第几行
    /**
     * 1.默认第一行，表格刷新第一行
     * 2.新增修改，传唯一值（POS_NO），设置当前行
     * 3.数据修改切换数据，提示是否保存。----实现思路，记录点击后的POS_NO，并不切换，等，需要切换时刷新即可
     */
    eventBus.$on("SET_F", (isInit) => {
      var Num = 0;
      if (isInit) {
        Num = this.$store.state.threeFlg;
      } else {
        Num = 0;
      }
      let V = 0;
      this.prposTabelData.forEach((i, v) => {
        if (i.actuNo == Num) {
          V = v;
        }
      });

      setTimeout(() => {
        try {
          this.$refs.singleTable.setCurrentRow(this.prposTabelData[V]);
          this.currentRow = this.prposTabelData[V];
          this.$emit("getMSTabelRow", this.prposTabelData[V]);
          eventBus.$emit("MSDType", 2)
          this.currentRow = this.prposTabelData[V];
          if (V >= 9) {
            this.$refs.singleTable.pagingScrollTopLeft((V - 2) * 33);
          } else {
            this.$refs.singleTable.pagingScrollTopLeft(0);
          }
        } catch (error) {
          this.$refs.singleTable.pagingScrollTopLeft(0);
        }
      }, 500);
    })


    eventBus.$on("goNextOfCenterTable", (flg) => {

      if (this.nextIndex == -1) {
        return
      }
      this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.nextIndex]);
      // this.currentRow = this.prposTabelData[this.activeNum];
      this.$emit("getMSTabelRow", this.prposTabelData[this.nextIndex]);
      if (this.nextIndex >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((this.nextIndex - 2) * 33);
      }
      setTimeout(() => {
        this.nextIndex = -1;
      }, 50);
    });

    eventBus.$on("resetTabelStyleForMSD", (setNum) => {
      setTimeout(() => {
        this.$refs.singleTable.doLayout(true);
      }, 300);
      if (setNum) {
        console.log(this.activeNum)
        setTimeout(() => {
          try {
            this.$refs.singleTable.setCurrentRow(this.prposTabelData[this.activeNum]);
            this.currentRow = this.prposTabelData[this.activeNum];
            this.$emit("getMSTabelRow", this.prposTabelData[this.activeNum]);
            if (this.activeNum >= 9) {
              this.$refs.singleTable.pagingScrollTopLeft((this.activeNum - 2) * 33);
            }
          } catch (error) {
            //
          }
        }, 700);
      } else {
        this.$refs.singleTable.setCurrentRow(this.prposTabelData[0]);
        this.currentRow = this.prposTabelData[0];
        this.$emit("getMSTabelRow", this.prposTabelData[0]);
      }
    });

    setTimeout(() => {
      // console.log('tabelDataConfig', this.tabelDataConfig);
    }, 3000);
  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {
    eventBus.$off('SET_F');
    eventBus.$off('goNextOfCenterTable');
    eventBus.$off('resetTabelStyleForMSD');
  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
  width: 100%;
  height: 100%;
  text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.sizeColor {
  color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .el-table__body tr.current-row>td {
  background-color: rgb(233, 236, 237);
}
</style>
